<template>
  <view class="drugs-record">
    <div v-if="!drugList.length" class="none">
      <div class="box">记录您的常用药信息，便于健康管理师更好的帮您制定适合的健康计划。</div>
      <div class="zwxx"></div>
    </div>

    <div v-else class="drugs-list">
      <div v-for="(item, key) in drugList" :key="item.baseDrugId" class="drug-box">
        <image class="icon" :src="icon" @click="delDrug(key)"></image>

        <image v-if="item.outerPackagePicUrl" mode="aspectFill" class="drug-img" :src="item.outerPackagePicUrl"></image>
        <image v-else class="drug-img" :src="zwtp"></image>
        <div class="drug-info">
          <div class="title">{{ item.commonName }}</div>
          <div class="spe">
            {{ item.preparationUnit }}*{{ item.packageSize }}{{ item.minimumUnit }}/{{ item.packageUnit }}
          </div>
          <div class="fre">每日三次 每次3片</div>
        </div>
      </div>
    </div>

    <div class="add" @click="link">新增/编辑用药信息</div>
  </view>
</template>

<script>
import icon from '@/static/icon/close.png';

export default {
  data() {
    return {
      icon,
      zwtp: 'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-community/zwtp.png',
      drugList: []
    };
  },

  onLoad: function (opt) {
    this.init();
  },

  methods: {
    async init() {
      const data = [
        {
          baseDrugId: '43',
          drugId: null,
          commonName: '地奥心血康软胶囊',
          producerName: '成都地奥制药集团有限公司',
          productCode: '00200001',
          productName: 'l',
          preparationUnit: '0.35g',
          packageSize: '30',
          minimumUnit: '粒',
          packageUnit: '盒',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151204/4afa81b895b54d8ca457866bad97a923.jpg',
          useAmount: 2,
          frequency: 3,
          dosage: '软胶囊剂',
          amount: null,
          largeClass: '中成药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo:
            '《冠心病稳定型心绞痛中医诊疗指南》,《中西医结合Ⅰ期心脏康复共识》,《急性心肌梗死中西医结合诊疗专家共识》',
          medicalInsuranceDirectoryCategory: 1,
          isJointStock: 0,
          consistency: 2,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        },
        {
          baseDrugId: '191',
          drugId: null,
          commonName: '金水宝胶囊',
          producerName: '江西济民可信金水宝制药有限公司',
          productCode: '00330001',
          productName: 'l',
          preparationUnit: '0.33g',
          packageSize: '63',
          minimumUnit: '粒',
          packageUnit: '瓶',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151204/346055c46fcd44c4ae03885a3d470b29.jpg',
          useAmount: 6,
          frequency: 1,
          dosage: '胶囊剂',
          amount: null,
          largeClass: '中成药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo: null,
          medicalInsuranceDirectoryCategory: null,
          isJointStock: 0,
          consistency: 1,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        },
        {
          baseDrugId: '198',
          drugId: null,
          commonName: '坎地沙坦酯胶囊',
          producerName: '江苏苏中药业集团股份有限公司',
          productCode: '00380001',
          productName: '苏纳',
          preparationUnit: '4mg',
          packageSize: '14',
          minimumUnit: '粒',
          packageUnit: '盒',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151204/f05d2528dad94c0daf809703a85218c2.jpg',
          useAmount: 1,
          frequency: 1,
          dosage: '胶囊剂',
          amount: null,
          largeClass: '西药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo: null,
          medicalInsuranceDirectoryCategory: null,
          isJointStock: 0,
          consistency: 1,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        },
        {
          baseDrugId: '206',
          drugId: null,
          commonName: '脑心通胶囊',
          producerName: '陕西步长制药有限公司',
          productCode: '01030001',
          productName: '步长',
          preparationUnit: '0.4g',
          packageSize: '36',
          minimumUnit: '粒',
          packageUnit: '盒',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151204/48a0bb1da2ec4dd59ee44f7a599e0039.jpg',
          useAmount: 2,
          frequency: 3,
          dosage: '胶囊剂',
          amount: null,
          largeClass: '中成药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo: null,
          medicalInsuranceDirectoryCategory: null,
          isJointStock: 0,
          consistency: 1,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        },
        {
          baseDrugId: '218',
          drugId: null,
          commonName: '通心络胶囊',
          producerName: '石家庄以岭药业股份有限公司',
          productCode: '01120001',
          productName: '无',
          preparationUnit: '0.26g',
          packageSize: '30',
          minimumUnit: '粒',
          packageUnit: '瓶',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151202/7a217a374a9f4243abdf47be306fbace.jpg',
          useAmount: 2,
          frequency: 3,
          dosage: '胶囊剂',
          amount: null,
          largeClass: '中成药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo: null,
          medicalInsuranceDirectoryCategory: null,
          isJointStock: 0,
          consistency: 1,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        },
        {
          baseDrugId: '234',
          drugId: null,
          commonName: '缬沙坦胶囊',
          producerName: '北京诺华制药有限公司',
          productCode: '03060001',
          productName: '代文',
          preparationUnit: '80mg',
          packageSize: '7',
          minimumUnit: '粒',
          packageUnit: '盒',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151202/bcc4df897f8841b1aac464f08d1490cd.jpg',
          useAmount: 1,
          frequency: 1,
          dosage: '胶囊剂',
          amount: null,
          largeClass: '西药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo: null,
          medicalInsuranceDirectoryCategory: null,
          isJointStock: 0,
          consistency: 1,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        },
        {
          baseDrugId: '235',
          drugId: null,
          commonName: '缬沙坦胶囊',
          producerName: '湖南千金湘江药业股份有限公司',
          productCode: '03060002',
          productName: '湘江',
          preparationUnit: '80mg',
          packageSize: '7',
          minimumUnit: '粒',
          packageUnit: '盒',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151202/4cc9aafa9441488a94c4f6c442c82215.jpg',
          useAmount: 1,
          frequency: 1,
          dosage: '胶囊剂',
          amount: null,
          largeClass: '西药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo: null,
          medicalInsuranceDirectoryCategory: null,
          isJointStock: 0,
          consistency: 1,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        },
        {
          baseDrugId: '236',
          drugId: null,
          commonName: '缬沙坦胶囊',
          producerName: '常州四药制药有限公司',
          productCode: '03060003',
          productName: '缬克',
          preparationUnit: '40mg',
          packageSize: '14',
          minimumUnit: '粒',
          packageUnit: '盒',
          status: 2,
          priceCent: 0,
          whScale: 0,
          outerPackagePicUrl:
            'https://img.wanhuhealth.com/images_demo/drugs/20151202/f55ba86d210e4a91b4c8628638cbdb35.jpg',
          useAmount: 2,
          frequency: 1,
          dosage: '胶囊剂',
          amount: null,
          largeClass: '西药',
          maximumDoseDailyInUnit: null,
          retailPrice: null,
          adverseReactions: null,
          approvalNumber: null,
          recommendedLevel: null,
          isBasicMedicine: 0,
          mainIngredients: null,
          medicineCharacter: null,
          indication: null,
          usageDosage: null,
          taboo: null,
          note: null,
          fdaPregnancyDrugClass: null,
          pregnantDrug: null,
          youngDrug: null,
          elderDrug: null,
          drugInteractions: null,
          drugOverdose: null,
          toxicologicalStudy: null,
          drugEffects: null,
          drugPharmacokinetics: null,
          medicineStorage: null,
          packageInstrution: null,
          storageCondition: null,
          medicineValidate: null,
          clinicalGuidelineElectedInfo: null,
          medicalInsuranceDirectoryCategory: null,
          isJointStock: 0,
          consistency: 1,
          wanhuDrugRating: 2,
          type: null,
          pics: [],
          outPics: [],
          innerPics: [],
          supplier: null
        }
      ];
      this.drugList = data;
      this.$store.commit('assess/SET_DRUGS', data);

      // const patientid = wx.getStorageSync('patientid');
    },

    // 删除药品
    delDrug(k) {
      uni.showModal({
        content: '确认删除该药品信息?',
        cancelText: '保留',
        confirmText: '删除',
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定');
            this.drugList.splice(k, 1);
          }
        }
      });
    },

    link() {
      this.$wxPromise.navigateTo({
        url: '/pagesC/drugs/registerDrugs'
      });
    }
  }
};
</script>

<style lang="scss">
page {
  min-height: 100%;
}
.drugs-record {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  .none,
  .drugs-list {
    padding-top: 24rpx;
    flex: 1;
    padding: 24rpx;
    box-sizing: border-box;
  }
  .box {
    background: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 4rpx 8rpx 0px;
    border-radius: 24rpx;
    padding: 32rpx;
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.55);
    margin: 24rpx;
    margin-top: 0;
  }
  .zwxx::after {
    content: '暂无用药信息';
  }
  .add {
    color: #ffffff;
    font-size: 36rpx;
    background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
    border-radius: 54rpx;
    padding: 26rpx 0;
    text-align: center;
    margin: 24rpx;
  }

  .tip {
    color: #999999;
    font-size: 28rpx;
    margin-bottom: 24rpx;
  }
  .drug-box {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 56rpx 72rpx 48rpx 34rpx;
    box-sizing: border-box;
    position: relative;
    display: flex;
    margin-bottom: 24rpx;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 4rpx 8rpx 0px;
    .icon {
      width: 56rpx;
      height: 56rpx;
      position: absolute;
      top: 12rpx;
      right: 12rpx;
    }
  }
  .drug-img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 8rpx;
    margin-right: 28rpx;
  }
  .drug-info {
    width: 446rpx;
    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      font-size: 32rpx;
      color: #222222;
      line-height: 1.3em;
    }
    .spe {
      font-size: 28rpx;
      color: #b2b2b2;
      margin: 16rpx 0;
    }
    .fre {
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.6);
    }
  }
}
</style>
